<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>AutoSuggest Sample</title>
    <style type="text/css">
	.suggestion_list
	{
	background: white;
	border: 1px solid;
	padding: 4px;
	}
	
	.suggestion_list ul
	{
	padding: 0;
	margin: 0;
	list-style-type: none;
	}
	
	.suggestion_list a
	{
	text-decoration: none;
	color: navy;
	}
	
	.suggestion_list .selected
	{
	background: navy;
	color: white;
	}
	
	.suggestion_list .selected a
	{
	color: white;
	}

	#autosuggest
	{
	display: none;
	}
    </style>
    <script language="JavaScript" src="autosuggest.js"></script>
	<script language="JavaScript" src="bindevents.js"></script>
  </head>
  <body>
	<h1>Cleanly binding to form elements</h1>

	<p>Instead of getting messy Javascript all over the place, a smarter way to bind AutoSuggest to your form elements is to use a separate javascript file to connect AutoSuggest to your text inputs procedurally:</p>

	<p><code><pre>
		function bindEvents()
		{
			//Find all of the INPUT tags
			var tags = document.getElementsByTagName('INPUT');
			for (i in tags)
			{
				var tag = tags[i];
				//If it's a text tag, attach an AutoSuggest object.
				if(tag.type.toLowerCase() == "text")
				{
					new AutoSuggest(tag,fruits);
				}
			}
		}
		
		window.onload = bindEvents;
	</pre></code></p>

	<p>You can, of course, modify this to bind by id, or any other method you might want. It's easier to maintain because the code is only in one place, and you don't have all that script in your HTML.</p>

	<form>
	<fieldset>
		<legend>Fruit</legend>
		<p>What's your favorite fruit for breakfast?</p>
		<p><input type="text" name="breakfast" /></p>
		<p>The best fruit on pancakes?</p>
		<p><input type="text" name="pancakes" /></p>
		<p>The best fruit for jams and jellies?</p>
		<p><input type="text" name="pancakes" /></p>
		<input type="submit">
	</fieldset>
	</form>
	<a href="index.html">&lt; Back</a>
	<div id="autosuggest"><ul></ul></div>
  </body>
</html>